<template>
    <div class="category">
      <slot name="header"></slot>
      <h2>dfffffff</h2>
      <!-- 那么默认是 default -->
      <slot></slot>
      <slot name="sidebar" :youxi="games" :title="title"></slot>
      <slot name="footer"></slot>
    </div>
</template>
<script setup lang="ts">
// 具名插槽
// 作用域插槽
import { reactive } from 'vue';

const games = reactive([
  { id: 1, name: 'Game 1', description: 'Description for Game 1' },
  { id: 2, name: 'Game 2', description: 'Description for Game 2' },
  { id: 3, name: 'Game 3', description: 'Description for Game 3' },
]);

let title = '游戏列表';

</script>
<style lang="scss" scoped>
h2{
  background-color: lightsalmon;
  text-align: center;
}
.category{
  width: 300px;
  height: 200px;
  padding: 10px;
  background-color: skyblue;
  border-radius: 10px;
  box-shadow: 0 0 10px gray;
}
</style>
